<template>
  <main-content-search-bar-wrapper>
    <search-bar>
      <template #normal>
        <el-form-item label="手机号">
          <el-input v-model="searchForm.phone" placeholder="请输入手机号" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户名称">
          <el-input v-model="searchForm.nickName" placeholder="请输入用户名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="refreshList">查询</el-button>
          <!-- TODO 加权限 -->
          <el-button type="primary" @click="showExportData = true">导出</el-button>
        </el-form-item>
        <!--        <ins-cascader-filter @change="(queryInsIds) => searchForm.queryInsIds = queryInsIds"></ins-cascader-filter>-->
      </template>
    </search-bar>
  </main-content-search-bar-wrapper>

  <layout-table ref="rankUsersTableRef" url="/user/userEntity/pageList" :param="searchForm" :hide-init="true"
    :set-search="manullySearch">
    <el-table-column label="头像" prop="headerImg" min-width="180">
      <template #default="scope">
        <el-image fit="contain" v-if="scope.row.img" :src="scope.row.img" style="width: 80px; height: 80px"></el-image>
        <div style="width: 80px; height: 80px;display: flex;align-items: center;justify-content: center;" v-else>暂无头像
        </div>
      </template>
    </el-table-column>
    <el-table-column label="昵称" prop="nickName" min-width="200"></el-table-column>
    <el-table-column label="用户手机号" prop="phone" min-width="150"></el-table-column>
    <el-table-column label="注册时间" prop="createTime" width="180">
      <template #default="scope">
        {{ formatTime(scope.row.createTime) }}
      </template>
    </el-table-column>
    <el-table-column label="会员获得时间" prop="createTime" width="180">
      <template #default="scope">
        {{ formatTime(scope.row.getGradleLastTime) }}
      </template>
    </el-table-column>
  </layout-table>
  <exportData v-model:show-dialog="showExportData" :search-data="searchForm" title="等级会员" export-type="memberUserExport">
  </exportData>
</template>

<script lang="ts" setup>
import moment from "moment";
import { ITaskListData, ITaskListItem } from "@/api/modules/taskCenter";
import { changeTaskStatus } from "@/api/taskCenter";
import { Ref, UnwrapNestedRefs } from "vue";
import { IRankBenefitItem, IRankUserData } from "@/api/modules/vipCenter";
import exportData from "@/components/exportData/exportData.vue";
const props = defineProps<{
  selectedRank: IRankBenefitItem
}>()

const selectedRankRef = toRef(props, 'selectedRank')
const showExportData = ref(false)
const searchForm: UnwrapNestedRefs<IRankUserData> = reactive({
  gradleId: null,
  phone: '',
  nickName: '',
  // queryInsIds: [],
})

const formatTime = (value: number) => {
  return value ? moment(value).format('YYYY-MM-DD HH:mm:ss') : ''
}

const _changeUserVipStatus = async (rowData: ITaskListItem) => {
  rowData.statusLoading = true
  // const rs = await changeTaskStatus({id: rowData.id})
  rowData.statusLoading = false

  // return rs.code === 200
}

const manullySearch: Ref<number> = ref(0)
const refreshList = () => {
  ++manullySearch.value
}

watch(selectedRankRef, (newValue) => {
  searchForm.gradleId = newValue.id // 触发搜索
})

const store = useStore();
// 监听机构
const insId = computed(() => {
  return store.state.insId.insId;
});
watch(
  () => insId,
  async () => {
    refreshList()
  },
  {
    deep: true
  }
)

onMounted(() => {
  if (selectedRankRef.value.id) {
    searchForm.gradleId = selectedRankRef.value.id // 触发搜索
    refreshList()
  }
})

</script>

<style scoped lang="scss"></style>
